<template>
  <div>
    <el-form :model="params" ref="ruleForm" label-position="right" size="small" label-width="110px" class="base-search-more">
      <el-row >
        <el-col :span="6" v-if="$store.state.showAgent">
          <el-form-item label="区域">
            <agent-list style="width: 100%" :agentids="params.agentIds" v-on:listenToChildEvent="getAentId" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="骑手名称">
            <el-input style="width: 100%" placeholder="请输入内容" v-model="params.delicername" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="商家名称">
            <el-input style="width: 100%" placeholder="请输入内容" v-model="params.businessname" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="用户名称">
            <el-input style="width: 100%" placeholder="请输入内容" v-model="params.username" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="星级">
            <el-select style="width: 100%" v-model="params.score" placeholder="请选择" clearable>
              <el-option label="一星" value="1" />
              <el-option label="二星" value="2" />
              <el-option label="三星" value="3" />
              <el-option label="四星" value="4" />
              <el-option label="五星" value="5" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="日期">
            <pt-date-picker v-model="params.date" :shortcuts="[{ text: '今天', start: 0, end: 0}, { text: '近七天', start: -7, end: 0}, {text: '近一个月', start: -30, end: 0}]" />
          </el-form-item>
        </el-col>
        <el-col :span="$store.state.showAgent ? 12 : 18" style="text-align:right;">
          <el-form-item label-width="0">
            <el-button type="primary" icon="el-icon-search" @click="$refs.pagination.handleSizeChange(10)">查询</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div class="base-table-wrap">
      <el-table :data="tableData.list" stripe style="width: 100%">
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-row type='flex'>
              <el-col :span='8'>
                <span style='font-weight: bold;font-size: 15px; line-height: 30px'>订单信息</span>
                <el-row type='flex' style='line-height: 25px'>
                  <span class='for-mit'>用户名称:</span><span class="right-text">{{props.row.username}}</span>
                </el-row>
                <el-row type='flex' style='line-height: 25px'>
                  <span class='for-mit'>区域:</span><span class="right-text">{{props.row.agentname}}</span>
                </el-row>
                <el-row type='flex' style='line-height: 25px'>
                  <span class='for-mit'>订单号:</span><span class="right-text">{{props.row.ordercode}}</span>
                </el-row>
                <el-row type='flex' style='line-height: 25px'>
                  <span class='for-mit'>下单时间:</span><span class="right-text">{{props.row.ordertime}}</span>
                </el-row>
                <el-row type='flex' style='line-height: 25px'>
                  <span class='for-mit'>支付金额:</span><span class="right-text">{{comConfig.mark}}{{props.row.cost}}</span>
                </el-row>
                <el-row type='flex' style='line-height: 25px'>
                  <span class='for-mit'>商品名称:</span><span class="right-text">{{props.row.goodssellname}}</span>
                </el-row>
              </el-col>
              <el-col :span='8'>
                <span style='font-weight: bold;font-size: 15px; line-height: 30px'>
                  评价商家:【{{props.row.businessname||'未知商家'}}】
                </span>
                <el-row type='flex' style='line-height: 25px'>
                  <span class='for-mit'>评价方式:</span><span>{{props.row.anonymous?'匿名评价':'正常评价'}}</span>
                </el-row>
                <el-row type='flex' style='line-height: 25px'>
                  <span class='for-mit'>用户评分:</span>
                  <span>
                    <el-rate :colors="['#f30500', '#f30500', '#f30500']" disabled 
                      :value="props.row.score?props.row.score:0" show-score text-color="#f30500" />
                  </span>
                </el-row>
                <el-row v-if='props.row.shangstr' type='flex' style='line-height: 25px'>
                  <span class='for-mit'>评论选项:</span><span class="right-text">{{props.row.shangstr}}</span>
                </el-row>

                <el-row v-if='props.row.content' type='flex' style='line-height: 25px'>
                  <span class='for-mit'>用户评论:</span><span class="right-text">{{props.row.content}}</span>
                </el-row>

                <el-row v-if='props.row.feedback' type='flex' style='line-height: 25px'>
                  <span class='for-mit'>商家回复:</span><span class="right-text">{{props.row.feedback}}</span>
                </el-row>

                <el-row v-if='props.row.recontent' type='flex' style='line-height: 25px'>
                  <span class='for-mit'>用户追评:</span><span class="right-text">{{props.row.recontent}}</span>
                </el-row>
              </el-col>
              <el-col :span='8'>
                <span style='font-weight: bold;font-size: 15px; line-height: 30px'>
                  评价骑手:【{{props.row.delicername||'未知骑手'}}】
                </span>
                <el-row type='flex' style='line-height: 25px'>
                  <span class='for-mit'>用户评价:</span>
                  <span style="color:red;" v-if="props.row.driversatisfy ===false">不满意</span>
                  <span v-else-if="props.row.driversatisfy ===null">未评价</span>
                  <span v-else>满意</span>
                  
                </el-row>
                <el-row type='flex' v-if="props.row.qishoustr" style='line-height: 25px'>
                  <span class='for-mit'>评价标签:</span>
                  <span style="color:#FF9800;">{{props.row.qishoustr}}</span>
                </el-row>
                <el-row v-if='props.row.replydrivercomment' type='flex' style='line-height: 25px'>
                  <span class='for-mit'>区域回复:</span><span class="right-text">{{props.row.replydrivercomment}}</span>
                </el-row>
              </el-col>
            </el-row>
          </template>
        </el-table-column>
        <el-table-column prop="agentname" label="区域" min-width="100" align="center" />
        <el-table-column prop="username" label="用户名称" min-width="100" align="center" />
        <el-table-column prop="ordercode" label="订单号" min-width="100" align="center" />
        <el-table-column prop="createtime" label="评论时间" min-width="120" align="center" />
        <el-table-column label="评价商家" min-width="160" align="left">
          <template slot-scope="scope">
            <div>商家：【{{scope.row.businessname||'未知商家'}}】</div>
            <div class='flex'>评分：
              <el-rate :colors="['#f30500', '#f30500', '#f30500']" disabled 
                :value="scope.row.score?scope.row.score:0" show-score text-color="#f30500" />
            </div>
          </template>
        </el-table-column>
        <el-table-column label="评价骑手" min-width="140" align="left">
          <template slot-scope="scope">
            <div>骑手：【{{scope.row.delicername||'未知骑手'}}】
              <el-button class="el-text-check" @click="backShopper(scope.row)" type="text" size="mini">回复</el-button>
            </div>
            <div v-if="comConfig.isChina" class='flex'>评价：
              <span style="color:red;" v-if="scope.row.driversatisfy === false">不满意</span>
              <span v-else-if="scope.row.driversatisfy === null">未评价</span>
              <span v-else>满意</span>
            </div>
            <div v-else class="flex">评分：
              <el-rate :colors="['#f30500', '#f30500', '#f30500']" disabled 
                :value="scope.row.driverScore ? scope.row.driverScore : 5" show-score text-color="#f30500" />
            </div>
          </template>
        </el-table-column>

        <el-table-column fixed="right" label="操作" width="60">
          <template slot-scope="scope">
            <el-row type="flex">
              <el-button class="el-text-danger" @click="deleteEavl(scope.row.id)" type="text" size="mini">删除</el-button>
            </el-row>
          </template>
        </el-table-column>
      </el-table>
      <pt-table-loading v-show="isloadingTable" />
      <pt-pagination ref="pagination" :total="tableData.total" @listeningEvent="triggerEvent" />
    </div>
    <el-dialog title="回复骑手" v-dialogDrag :visible.sync="dialogTableVisible" width="600px" :close-on-press-escap="true">
      <el-form :model="form" ref="ruleForm" size="small" label-width="110px" >
        <el-form-item label='回复内容' prop='replydrivercomment' :rules="[{required: true, message: '回复内容未填', trigger: 'blur'}]">
          <el-input type='textarea' :rows='2' v-model='form.replydrivercomment' />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" :loading='isloadingsubmit' @click="submitForm('ruleForm')">确认</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
  import { getDay } from '@/utils/ptkc.js'
  export default {
    data() {
      return {
        params: { //查询数据
          agentIds: [], //区域
          delicername: '',
          businessname: '',
          username: '',
          score: '',
          date: '',
          page: 0,
          size: 10,
        },
        form: {
          id: '',
          replydrivercomment: '',
        },
        isloadingTable: false,
        isloadingsubmit: false,
        dialogTableVisible: false,
        tableData: {}, //表单数据
        newPage: 1, //显示当前page
        pageSize: 10, //分页数量
      }
    },
    methods: {
      getAentId(item) { //获取子组件传递的区域
        this.params.agentIds = item
      },
      triggerEvent(type,val) { // 分页器
        if (type === 'page') {
          this.params.page = val - 1
        } else if (type === 'size') {
          this.params.page = 0
          this.params.pageSize = val
        }
        this.getTableList()
      },
      backShopper(row) { // 回复骑士
        this.form.id = row.id
        this.form.replydrivercomment = row.replydrivercomment
        this.dialogTableVisible = true
      },

      deleteEavl(id) { // 删除
        this.$confirm('此操作将永久删除列表, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.isloadingTable = true
          this.$http.get('/server/businessComment/delete?' + this.qs.stringify({id})) .then(res => {
            if (res.data.success) {
              this.$message({type: 'success', message: '删除成功!'})
              if (this.tableData.list.length == '1') {
                this.$refs.pagination.handleSizeChange(10)
              } else {
                this.getTableList()
              }
            }
          }).finally(() => { this.isloadingTable = false })
        }).catch(() => {
          this.$message({type: 'info', message: '已取消删除'})
        })
      },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            const params = {...this.form }
            this.issubmitLoading = true
            this.$http.get('/server/businessComment/setComment?' + this.qs.stringify(params)).then(res => {
              if (res.data.success) {
                this.dialogTableVisible = false
                this.getTableList()
              }
            }).finally(() => { this.issubmitLoading = false })
          }
        })
      },
      getTableList() {  //获取订单数据
        const params = { ...this.params }
        this.isloadingTable = true
        params.date = params.date ? params.date.join(',') : ''
        params.agentIds = params.agentIds.length > 0 ? params.agentIds.join(',') : ''
        this.$http.get('/server/businessComment/list?' + this.qs.stringify(params)).then(res => {
          if (res.data.success) {
            this.tableData = res.data.data
          }
        }).finally(() => { this.isloadingTable = false })
      }
    },
    mounted() {
      this.getTableList()
    },

  }
</script>

<style scoped>
  .sub-nav {
    padding: 10px 15px;
    background: #fff;
  }
  .sub-nav span.cur {
    color: #01a0e1;
    border-bottom: 2px solid #01a0e1;
  }
  .sub-nav span {
    width: 80px;
    height: 38px;
    line-height: 38px;
    text-align: center;
    margin-left: 15px;
    font-weight: 600;
    cursor: pointer;
    color: #909399;
    border-bottom: 2px solid #fff;
  }
  .for-mit {
    min-width: 80px;
    color: #99a9bf;
  }
  .right-text{
    word-break: break-all;
    margin-right: 20px;
  }
</style>
